<template>
  <view class="vbox">
    <view class="vtitle" :style="titleStyle">
      <view class="vticon"></view>
      <span>{{ title }}</span>
    </view>
    <view class="vmain" :style="space==0?'':'padding-bottom: 15px; padding-top: 20px; padding-right: 50px;'">
      <slot></slot>
    </view>
  </view>
</template>
<script>
export default {
  props: ["title","space","titleStyle"],
};
</script>
<style>
.vbox {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  color: #323232;
  overflow: hidden;
}
.vbox > view {
  padding-left: 20px;
  background: #fff;
}
.vtitle {
  height: 50px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  margin-bottom: 2px;
}
.vticon {
  min-height:15px;
  max-height: 22px;
  height:70%;
  width: 3px;
  margin-right: 15px;
  background: #2d9386;
}
.vmain {
  flex: 1;
}
</style>